<template>
  <footer class="footer">
    <Broadcast/>
    <div class="footer-info">
      <div class="bx">
        <div class="footer-info-item">
          <div class="footer-text">下载千千客户端</div>
          <!--  系统版本选择下载    -->
          <div class="footer-type">
            <div class="footer-type-item">
              <div class="iconfont">&#xe68d;</div>
              <span>Android版</span>
              <div class="em">
                <img src="https://static1-music.taihe.com/client/img/9db68ae.jpg" title="" style="">
                <p>微信扫一扫</p>
              </div>
            </div>
            <div class="footer-type-item">
              <div class="iconfont">&#xe695;</div>
              <span>Android版</span>
              <div class="em">
                <img src="https://static1-music.taihe.com/client/img/9db68ae.jpg" title="" style="">
                <p>微信扫一扫</p>
              </div>
            </div>
            <div class="footer-type-item">
              <div class="iconfont">&#xe93c;</div>
              <span>Windows版</span>
            </div>
            <div class="footer-type-item">
              <div class="iconfont">&#xe744;</div>
              <span>MAC版</span>
            </div>
          </div>
        </div>
        <div class="footer-info-item ">
          <div class="footer-text ">关于千千音乐</div>
          <!--  更多建议    -->
          <div class="footer-mind">
            <a href="javascript:;">意见反馈</a>
            <a href="javascript:;">联系我们</a>
            <a href="javascript:;">DMH数字音乐分发平台</a>
          </div>
        </div>
        <div class="footer-info-item">
          <div class="footer-text">关注千千音乐</div>
          <!--  关注微博及微信公众号    -->
          <div class="footer-more">
            <div class="footer-more-item">
              <span class="iconfont">&#xe608;</span>
              <span> 关注微博</span>
            </div>
            <div class="footer-more-item">
              <span class="iconfont">&#xe61a;</span>
              <span>微信公众号</span>
              <div class="em">
                <img src="https://static1-music.taihe.com/client/img/9db68ae.jpg" title="" style="">
                <p>微信扫一扫</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class=" footer-copyright">
      <div class="bx">
        <a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2020023087号</a>
        <p>
          呱呱呱 呱呱呱 呱呱呱 呱呱呱 呱呱呱 呱呱呱
        </p>
      </div>
    </div>
  </footer>
</template>

<script>
import Broadcast from "@/components/Broadcast/Broadcast";
export default {
  name: 'Fotter',
  components:{
    Broadcast
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.footer-info {
  background: #282828;
  padding: 70px 0;
  margin-top:30px;
  .bx {
    color: #fff;
    display: flex;
    justify-content: space-between;
  }
}

.footer-text {
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
}

//二维码
.em {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #fff;
  width: 160px;
  padding: 10px 0 12px;
  text-align: center;

  img {
    width: 140px;
  }

  p {
    color: #303133;
    margin-top: 8px;
  }
}

// 系统版本下载样式
.footer-type {
  display: flex;

  .iconfont {
    font-size: 40px;
  }

  .footer-type-item {
    position: relative;
    width: 100px;
    padding: 20px 0;
    margin-right: 10px;
    background: #303133;
    display: flex;
    flex-flow: column;
    align-items: center;
    color: #909399;

    &:hover {
      .em {
        display: block;
      }
    }
  }
}

// 更多建议
.footer-mind {
  a {
    color: #909399;
    font-size: 15px;
    margin-right: 20px;

    &:hover {
      color: red;
    }
  }
}

// 关注千千音乐
.footer-more {
  display: flex;
  color: #ccc;

  .iconfont {
    background: #909399;
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px;
    font-size: 25px;
    color: #000;
    vertical-align: middle;
    margin-right: 10px;
  }

  .footer-more-item {
    position: relative;
    text-align: center;
    padding: 30px 0;
    width: 160px;
    background: #303133;
    margin-right: 10px;

    &:hover {
      .em {
        display: block;
      }
    }
  }
}

//底部版权
.footer-copyright {
  padding: 20px 0;
  color: #fff;
  background: #1F1F1F;
  font-size: 15px;
  text-align: center;
}
</style>
